<template>
	這裏是 書法 内容展示欄
	<div class="cal_body"><img class="img_width" @click="LinkImg(item)" v-for="item in imgArr" :key="item" :src="ReimgUrl[item]" alt="" /></div>
</template>

<script setup>
import { reactive, inject } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

let store = useStore();

let getSourceUrl = inject('getSourceUrl');

let imgArr = ['6672', '6673', '6674', '6675', '6676'];
let ReimgUrl = reactive({});

function loopImgArrToUrl(imgArr) {
	for (var i = 0; i < imgArr.length; i++) {
		commitImgSrc(imgArr[i]);
	}
}
loopImgArrToUrl(imgArr);

function commitImgSrc(i) {
	// console.log(i);
	if (i === undefined) {
		return;
	} else {
		import(`/public/calligraphyPhoto/img_${i}.jpg`).then(e => {
			// console.log(e);
			// console.log(e.default);
			ReimgUrl[i] = e.default;
		});
		return ReimgUrl[i];
	}
}

getSourceUrl();
let router = useRouter();
// console.log(router);

function LinkImg(terget) {
	console.log(terget);
	// console.log(useRouter);
	console.log(imgArr.indexOf(terget));

	store.commit('setTergetID', [imgArr, imgArr.indexOf(terget)]);

	//临时建立 图片 路由 图片专属展示页面
	router.addRoute({
		path: '/img/' + terget,
		name: '/img/' + terget,
		component: () => import('../../../../views/singlePage.vue')
	});
	console.log(router);

	location.href = 'http://localhost:8080/#/img/' + terget;
	// function createRouter() {
	// router.addRoute({
	// 	path: '/img/' + terget,
	// 	component: () => {
	// 		import('../../../../views/needToKnow.vue');
	// 		}
	// 	});
	// }
	// createRouter();
}
</script>

<style scoped lang="scss">
.cal_body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	// justify-items: center;
	align-items: center;
	align-content: space-around;
}
.img_width {
	// min-width: 400px;
	max-width: 400px;

	margin: 20px;

	transition: scale 0.1s ease-in-out;

	cursor: pointer;
}
.img_width:hover {
	scale: 1.003;
}
</style>
